<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>门店收入报表</title>
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>
    <#include "/common/link.ftl" >

</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl" >

    <#assign currentMenu="consumptionReport"/>

    <#include "/common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>门店收入报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <div style="margin: 10px;">
                    <!--高级查询--->
                    <form class="form-inline" id="searchForm" action="/consumptionReport/list" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label>门店查询</label>
                            <select class="form-control" name="businessId">
                                <option value="">请选择门店</option>
                                <#list business as b>
                                    <option value="${b.id}">${b.name}</option>
                                </#list>
                            </select>
                            <script>
                                $("select[name=businessId]").val(${qo.businessId});
                            </script>
                        </div>
                        <div class="form-group">
                            <label>时间段查询:</label>
                            <div class="input-daterange input-group" >
                                <input type="text" name="startDate"
                                       value="${((qo.startDate)?string("yyyy-MM-dd"))!}" class="input-sm form-control input-date"/>
                                <span class="input-group-addon">到</span>
                                <input type="text" name="endDate"
                                       value="${((qo.endDate)?string("yyyy-MM-dd"))!}" class="input-sm form-control input-date"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>预约类型</label>
                            <select class="form-control" name="typeId">
                                <option value="">请选择预约类型</option>
                                <option value="1">预约</option>
                                <option value="0">非预约</option>
                            </select>
                            <script>
                                $("select[name=typeId]").val(${qo.typeId});
                            </script>
                        </div>

                        <div class="form-group">
                            <label for="status">分组类型:</label>
                            <select class="form-control" name="groupByName">
                                <#list consumptionReportEnum as c>
                                    <option value="${c.name()}">${c.getName()}</option>
                                </#list>
                            </select>
                            <script>
                                $("select[name=groupByName]").val('${qo.groupByName}');
                            </script>
                        </div>

                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</button>
<#--                        <button type="button" class="btn btn-info btn-chart" >-->
<#--                            <span class="glyphicon glyphicon-stats"></span> 柱状图-->
<#--                        </button>-->
                        <button type="button" class="btn btn-info btn-setChart" >
                            <span class="glyphicon glyphicon-stats"></span> 柱状图
                        </button>
                    </form>
                </div>
                <div class="box-body table-responsive no-padding ">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th>分组类型</th>
                                <th>总订单数</th>
                                <th>总消费金额</th>
                                <th>总实收金额</th>
                                <th>总优惠金额</th>
                            </tr>
                        </thead>
                        <tbody>
                            <#list pageInfo.list as c>
                                <tr>
                                    <td>${c.groupByName}</td>
                                    <td>${c.totalCount}</td>
                                    <td>${c.totalAmount}</td>
                                    <td>${c.totalPayAmount}</td>
                                    <td>${c.totalDiscountAmount}</td>
                                </tr>
                            </#list>
                        </tbody>
                    </table>
                    <#include "/common/page.ftl">
                </div>
            </div>
        </section>
    </div>
    <#include "/common/footer.ftl">
</div>

<div class="modal fade" id="setChartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="padding: 20px">

        </div>
    </div>
</div>

<script>
    $(".btn-setChart").click(function () {
        var $setChartModal = $("#setChartModal");
        $setChartModal.removeData('bs.modal');//清空模态框数据
        $setChartModal.modal({
            remote : '/consumptionReport/setChart' + "?" + $("#searchForm").serialize() //加上高级查询的条件
        });
    });
</script>








<!-- Modal模态框 -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="padding: 20px">
            <div id="main" style="width: 900px;height:400px;"></div>
        </div>
    </div>
</div>
<script>
    $(".btn-chart").click(function () {
        $("#chartModal").modal("show");
    });

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        legend: {},
        tooltip: {},
        dataZoom: [
            {
                type: 'slider',
                show: true,
                start: 94,
                end: 100,
                handleSize: 8
            },
            {
                type: 'inside',
                start: 94,
                end: 100
            },
            {
                type: 'slider',
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 12,
                height: '70%',
                handleSize: 8,
                showDataShadow: false,
                left: '93%'
            }
        ],
        dataset: {
            source: [
                ['分组类型', '总消费金额', '总实收金额', '总优惠金额'],
                <#list pageInfo.list as c>
                ['${c.groupByName}', ${c.totalAmount},${c.totalPayAmount}, ${c.totalDiscountAmount}]
                <#if c_index < pageInfo.list?size - 1>,</#if>
                </#list>
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    option && myChart.setOption(option);
</script>
</body>
</html>